<template>
    <div class="box_product">
        <vab-card v-for="(item, i) in productBox" :key="i">
            <template #header>
               <div class="flex_sb">
                <span class="leve2_title">规则详情 -<span class="fontStrong">[{{ i + 1 }}]</span>- 指定产品满数量赠</span>
               </div>
            </template>
            <template #default>
                <el-form :model="ruleForm" ref="ruleFormRef">
                    <!-- <el-row :gutter="24" style="margin-bottom: 12px;">
                        <el-col v-bind="colLay">
                            <el-form-item label="有效金额范围:">
                                指定产品计价总数量
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <!-- 产品-赠品 -->
                    <el-row class="productBox" :gutter="24">
                        <el-col :span="24" style="margin-bottom: 12px;">
                            <aside>
                                <header class="table_head flex">
                                    产品信息
                                    <!-- {{ i + 1 }}  -->
                                </header>
                                <el-table :data="ruleForm[i]['product']" border max-height="180px">
                                    <el-table-column label="序号" width="60px" align="center">
                                        <template #default="{ $index }">
                                            <div class="text_center ellipsis">
                                                {{ $index + 1 }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="90">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>品牌</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <div class="text_center ellipsis">
                                                {{ row.brand_name || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品条码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_barcode">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_barcode || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品编码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_no">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_no || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column min-width="360">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品名称</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_name">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_name || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>规格</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <div class="text_center">
                                                {{ row.specification || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="360">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <div class="text_center">
                                                {{ MoneyFormat(row.goods_num, 0) || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </aside>
                            <VabTotal :total="ruleForm[i]['product'].length"/>
                        </el-col>
                        <!-- <el-col :span="2">
                            <div class="transfer flex_column_center">
                                <el-button type="primary"><el-icon><DArrowRight /></el-icon></el-button>
                            </div>
                        </el-col> -->
                        <el-col :span="24">
                            <aside>
                                <header class="table_head flex">
                                    赠品信息
                                    <!-- {{ i + 1 }}  -->
                                </header>
                                <el-table :data="ruleForm[i]['gift']" border max-height="180px">
                                    <el-table-column label="序号" width="60px" align="center">
                                        <template #default="{ $index }">
                                            <div class="text_center ellipsis">
                                                {{ $index + 1 }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="90">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>品牌</span>
                                            </div>
                                        </template>
                                        <template #default="{ row, $index }">
                                            <div class="text_center ellipsis">
                                                {{ row.brand_name || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品条码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_barcode">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_barcode || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="170">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品编码</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_no">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_no || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column>
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>产品名称</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="goods_name">
                                                <div class="text_center ellipsis">
                                                    {{ row.goods_name || '--' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center">
                                                <span class="required_text">*</span>
                                                <span>规格</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <div class="text_center">
                                                {{ row.specification || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="120">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>是否固定数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <el-form-item prop="is_require">
                                                <div class="text_center ellipsis">
                                                    {{ row.is_require ? '是' : '否' }}
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </el-table-column>
                                    <el-table-column width="240">
                                        <template #header>
                                            <div class="text_center ellipsis">
                                                <span>数量</span>
                                            </div>
                                        </template>
                                        <template #default="{ row }">
                                            <div class="text_center">
                                                {{ MoneyFormat(row.goods_num, 0) || '--' }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </aside>
                            <VabTotal :total="ruleForm[i]['product'].length"/>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </vab-card>
    </div>
</template>

<script setup lang="ts">
import { getProductSearch } from '~/src/api/dms/product';
import { MoneyFormat } from '~/src/utils/utils';


/**
 * @var
 */

const colLay = {
  xs: 12, sm: 12, md: 12, lg: 8, xl: 8,
}

const ruleFormRef = ref()
const ruleForm = ref<any>([])
const productBox = ref<any>([])

const brandOption = ref<any>([])



/**
 * @method
 */

// 表格操作
const handleTable = (i: number, modeIndex: number, mode = '', type: string) => {
  if (type == 'add') {
    ruleForm.value[modeIndex][mode].splice(i + 1, 0, {})
  }
  if (type == 'detele') {
    ruleForm.value[modeIndex][mode].splice(i, 1)
  }
}

const ReturnBrandOption = (value: string) => {
  const row = brandOption.value.filter((item: any) => {
    return item.value == value
  })

  return row[0].label
}

const getScreen = async () => {
  try {
    let res = await getProductSearch()

    const { brand, name, number } = res.data

    brandOption.value = brand.map((item: any) => { return { value: item.entry_id, label: item.name } })

  } catch (error) {

  }
}

// 更新数据
const getUpdateData = ({ item_list }: any) => {
  ruleForm.value = item_list
  productBox.value.length = item_list.length
}

onMounted(() => {
  getScreen()
})


defineExpose({
  getUpdateData,
})
</script>

<style lang="scss" scoped>
.table_head {
  width: 100%;
  padding: 8px 12px;
  background-color: var(--el-color-primary);
  color: #fff;
  font-size: 14px;
}

.box_product {
  :deep() {
    .el-form-item {
      margin-bottom: 2px;
    }

    // .el-table .el-table__cell {
    //     padding: 4px 0px;
    // }
  }

  .transfer {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .productBox {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0px;
    }
  }


}
</style>
